<template>
	<view >
		

		<view class="cu-card case" v-for="(item,index) in list" :key="index">
			<view class="cu-item shadow">
				
				<view class="image" @tap="clickTitlepic">
					<!-- 图片开始 -->
					<image :src="item.titlePic"
					 mode="widthFix" lazy-load></image>
					 <!-- 图片结束 -->
					 
					 <!-- 图片右上角图标开始 -->
					<view class="cu-tag bg-blue">{{item.type}}</view>
					 <!-- 图片右上角图标结束 -->
					<!-- 图片标题开始 -->
					<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text></view>
					<!-- 图片标题结束 -->
				</view>
				
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<!--头像开始 -->
						<view class="cu-avatar round lg" :style="{backgroundImage:'url(' + item.userPic + ')'}" ></view>
						<!--头像结束 -->
						<view class="content flex-sub">
							
							<view class="text-grey">{{item.userName}}</view>
							<view class="text-gray text-sm flex justify-between">
								{{item.dateTime}}
								<!-- 点赞、评论开始 -->
								<view class="text-gray text-sm ">
									<!-- 点赞开始 -->
									<button class="cu-btn cuIcon" :class="item.isLike===0?'':'bg-blue'" @tap="clickAppreciate(index)" >
											<text :class="item.isLike===0?'cuIcon-appreciatefill ':'cuIcon-appreciate'"
											class=" margin-lr-xs" style="font-size: 30upx;" ></text>
									</button>
									<text style="margin-left: 10upx;margin-right: 10upx;">{{item.praiseNum}}</text>
									<!-- 点赞结束 -->
									<!-- 评论开始 -->
									<button class="cu-btn cuIcon" >
										<text class="cuIcon-messagefill margin-lr-xs " style="font-size: 30upx;" @tap="clickComment(index)" ></text> 
									</button>
									<text style="margin-left: 10upx;">{{item.commentNum}}</text>
									
									<!-- 点评论结束 -->

									
								</view>
								<!-- 点赞、评论结束 -->

								
								
								
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	


		
		
					   

					 	

	</view>
</template>

<script>
export default{


	data()
	{
		return {
           list:[
			   {//卡片1
				   userPic:"../../../static/cover/cover-01.jpg",//用户头像
				   userName:"欧阳JJ",//昵称
				   title:"今天的作业好难",//标题
				   titlePic:"../../../static/cover/cover-02.jpg",//标题图片
				   dateTime:"2小时前",//时间
				   type:"new",//课程页面类型
					isLike:0,//0:没操作,1:点赞了
					praiseNum:11,//点赞的数量
				   commentNum:10,//评论数
				   
			   },
			   {//卡片3
			   				   userPic:"../../../static/cover/cover-01.jpg",//用户头像
			   				   userName:"欧阳JJ",//昵称
			   				   title:"我抄了J爷的作业，拿了满分",//标题
			   				   titlePic:"../../../static/cover/cover-02.jpg",//标题图片
			   				   dateTime:"1天钱",//时间
			   				   type:"new",//课程页面类型
					           isLike:0,//0:没操作,1:点赞了
					           praiseNum:11,//点赞的数量
			   				   commentNum:10,//评论数
			   				   
			   },
			   {//卡片3
				   userPic:"../../../static/cover/cover-01.jpg",//用户头像
				   userName:"哈士奇",//昵称
				   title:"看我J爷发威",//标题
				   titlePic:"../../../static/cover/cover-01.jpg",//标题图片
				   dateTime:"2分钟前",//时间
				   type:"new",//课程页面类型
					isLike:0,//0:没操作,1:点赞了
					 praiseNum:11,//点赞的数量
				   commentNum:10,//评论数
				  
			   },
		   ]
		}
	     },
	methods:{

	    clickTitlepic:function()//标题图片点击事件
			 {
		  uni.navigateTo({
		  	url: './video/index',
		  	success: res => {},
		  	fail: () => {console.log(假的)},
		  	complete: () => {}
		  });	 
			},
			clickAppreciate(e) {
				var index=e;
				//console.log("index的值"+index)
				//console.log("islike的值"+this.list[index].isLike)
				if (this.list[index].isLike === 0) {
					this.list[index].isLike = 1;
					this.list[index].praiseNum+=1;
			
				} else {
					this.list[index].isLike =  0;
				    this.list[index].praiseNum-=1;
				}
			},
			clickComment(e) {
				var index=e;
				//console.log("index的值"+index)
				uni.navigateTo({
					url: './comment/index?title='+this.list[index].title,
					success: res => {},
					fail: () => {console.log(假的)},
					complete: () => {}
				});	
				
			},
			
		 }
}
</script>

<style>


</style>
